<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    title?: string
    width?: string
    appendToBody?: boolean
    appendTo?: string | HTMLElement
    closeOnClickModal?: boolean
    closeOnPreesEscape?: boolean
  }>(),
  {
    title: '提示',
    modelValue: false,
    width: '500',
    appendToBody: false,
    closeOnClickModal: true,
    closeOnPreesEscape: true
  }
)

const emit = defineEmits(['update:modelValue', 'before-close', 'submit'])

const dialogVisible = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

const handleClose = () => {
  emit('before-close')
}

const submit = () => {
  emit('submit')
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    class="easy-dialog"
    :title="title"
    :width="width"
    :before-close="handleClose"
  >
    <el-scrollbar max-height="calc(100vh - 300px)">
      <slot />
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <slot v-if="$slots.footer" name="footer" />
        <template v-else>
          <el-button @click="handleClose">{{
            t('button.cancelText')
          }}</el-button>
          <el-button type="primary" @click="submit">
            {{ t('button.confirmText') }}
          </el-button>
        </template>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.easy-dialog {
  --easy-dialog-padding: 16px;

  padding: 0;
  border-radius: var(--easy-border-radius);

  .el-dialog__header {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 var(--easy-dialog-padding);
    border-bottom: 1px solid var(--easy-border-color);
  }

  .el-dialog__body {
    padding: 20px 40px;
  }

  .el-dialog__footer {
    padding-top: 0;
  }

  .dialog-footer {
    padding: var(--easy-dialog-padding);
    // border-top: 1px solid var(--easy-border-color);
  }
}
</style>
